import React from 'react'
import { ALLSTATE, ITEMTYPE } from "../../../types/store.d"
import { useDispatch, useSelector } from "react-redux"
import { NavBar, Toast, ProductCard, Tag, Button, SubmitBar, Checkbox } from 'react-vant';
import Hoclogin from "../../../utils/Hoclogin"
import * as Action from "../../../actions/index"

function Shopcar() {
  const dispatch = useDispatch()
  const shopcarArr = useSelector((state: ALLSTATE) => {
    return state.shopcarArr
  })
  const checkOne = (val: string) => {
    dispatch(Action.check_one(val))
  }
  const checkbox = useSelector((state: ALLSTATE) => {
    return state.checkbox
  })
  const allmoney = useSelector((state: ALLSTATE) => {
    return state.allmoney
  })
  const changechecked = useSelector((state: ALLSTATE) => {
    return state.changechecked
  })
  console.log(checkbox, "checkbox===");
  const Allcheck = (e: boolean) => {
    dispatch(Action.check_all(e))
  }
  const add_num=(id:string)=>{
    dispatch(Action.add_num(id))
  }
  const reduce_num=(id:string)=>{
    dispatch(Action.reduce_num(id))
  }
  const changecheck=()=>{
    dispatch(Action.change_check())
  }
  return (
    <div className="shopcar">
      <NavBar
        title="购物车"
        leftText="返回"
        onClickLeft={() => Toast('返回')}
      />

      {
        shopcarArr && shopcarArr.length > 0 ? shopcarArr.map((item, index) => {
          return <div style={{ display: "flex" }} key={index}>
            <input type="checkbox" name="" id="" checked={item.flag} onChange={() => checkOne(item.id)} />
            <ProductCard style={{ width: "100%" }}
              num={item.num}
              price={item.price}
              title={item.title}
              thumb={item.img}
              footer={
                <>
                  <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>add_num(item.id)}>
                    ++
                  </Button>
                  <Button size="mini" round plain onClick={()=>reduce_num(item.id)}>
                    --
                  </Button>
                </>
              }
            />
          </div>
        }) : "暂时没有数据"
      }
      <SubmitBar
        price={allmoney*100}
        buttonText="提交订单"
      >
        <Checkbox checked={checkbox} onChange={(e) => Allcheck(e)}>全选</Checkbox>
        <Checkbox checked={changechecked} onChange={() => changecheck()}>反选</Checkbox>
      </SubmitBar>
    </div>
  )
}

export default Hoclogin(Shopcar)